{% extends "base.html" %}
{% block title %}Search results for "{{query}}", classified with {{model.name}}{% endblock %}
{% block head %}
  <style type="text/css">
    .category {
      float: left;
      width: 30%;
      border: 1px solid black;
      margin: 5px;
    }
    .newtweets {
      text-align: center;
      border: 1px solid black;
      padding: 5px;
      background: #aaaaff
    }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="/static/json2.js"></script>
  <script type="text/javascript">
    function get_new_tweets() {
      var since = undefined;
      var delay = 5000;
      var new_tweets = [];
      var message = undefined;
      var timeout_id = undefined;
      
      function fetch_tweets() {
        data = {
          "q": "{{query}}",
        };
        if(since != undefined)
          data["since_id"] = since;
        $.ajax({
          dataType: "jsonp",
          url: "http://search.twitter.com/search.json",
          data: data,
          success: function(msg) {
            if(since == undefined) {
              // Display results immediately
              classify_tweets(msg.results);
            } else {
              // Add results to list; increase delay; add message
              if(msg.results.length > 0) {
                new_tweets = new_tweets.concat(msg.results);
                if(message == undefined) {
                  message = $("<div />", {
                    "class": "newtweets",
                  });
                  message.click(function() {
                    classify_tweets(new_tweets);
                    new_tweets = [];
                    delay = 5000;
                    window.clearTimeout(timeout_id);
                    timeout_id = window.setTimeout(fetch_tweets, delay);
                    message.remove();
                    message = undefined;
                  });
                  $("#bodycontainer").prepend(message);
                }
                message.text(new_tweets.length + " new tweets");
              }
              delay *= Math.SQRT2;
            }
            since = msg.max_id;
            timeout_id = window.setTimeout(fetch_tweets, delay);
          },
        });
      }
      fetch_tweets();
    }

    function classify_tweets(tweets) {
      $.ajax({
        type: "POST",
        url: "/classify/{{model_id}}",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(tweets),
        success: function(tweets) {
          add_tweets(tweets);
        },
      });
    }
    
    function add_tweets(tweets) {
      for(var idx in tweets) {
        tweet = tweets[idx];
        category = $("#" + tweet.category + " .tweets");
        markup = create_tweet_markup(tweet);
        category.prepend(markup)
      }
    }
    
    function create_tweet_markup(tweet) {
        markup = $("<div />", {class: "tweet"});
        markup.append($("<p />", {text: tweet.text}));
        markup.append($("<div />", {
            text: "by " + tweet.from_user,
            class: "author"
        }));
        return markup;
    }

    $(function(){
      get_new_tweets();
    });
  </script>
{% endblock %}
{% block body %}
  <h1>Search results for "{{query}}", classified with {{model.name}}</h1>
  <div id="bodycontainer">
    {% for category in model.category_tuples %}
      <div class="category" id="category-{{category.0}}">
        <h2>{{category.1|escape}}</h2>
        <div class="tweets">
        </div>
      </div>
    {% endfor %}
  </div>
{% endblock %}
